import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterapp/src/utils/date_utils.dart';

main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion(
        value: SystemUiOverlayStyle(
          //iOS状态栏文字白色
          statusBarBrightness: Brightness.dark,
          // 设置安卓的状态栏颜色 让状态栏隐藏
          statusBarColor: Color(0x000000),
        ),
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 第一层，图片背景
              buildBgWidget(),
              // 第二层，高斯模糊
              buildBlurWidget(),
              // 第三层，按钮文字
              buildButtonWidget(),
              // 第四层，中间文字
              buildTitleWidget(),
            ],
          ),
        ),
      ),
    );
  }

  buildBgWidget() {
    return Positioned.fill(
      child: Image.asset("assets/images/login_bg.webp", fit: BoxFit.fill),
    );
  }

  buildBlurWidget() {
    return Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 0.3, sigmaY: 0.3),
        child: Container(
          color: Colors.black.withOpacity(0.5),
        ),
      ),
    );
  }

  buildButtonWidget() {
    return Positioned(
      left: 80,
      right: 80,
      bottom: 80,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 54,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30)),
              border: Border.all(color: Colors.white),
            ),
            child: Text(
              "登录",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
          ),
          SizedBox(height: 20),
          Container(
            height: 54,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30)),
              border: Border.all(color: Colors.white),
            ),
            child: Text(
              "注册",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
          ),
          SizedBox(height: 40),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 1,
                width: 50,
                decoration: BoxDecoration(color: Colors.grey),
              ),
              Text(
                "或者跳过",
                style: TextStyle(color: Colors.grey),
              ),
              Container(
                height: 1,
                width: 50,
                decoration: BoxDecoration(color: Colors.grey),
              ),
            ],
          ),
        ],
      ),
    );
  }

  buildTitleWidget() {
    return Positioned(
      top: 150,
      child: Text(
        "前往体验",
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.white, fontSize: 30),
      ),
    );
  }
}
